<template>
  <div class="app">
    <h3>---请选择省市区---</h3>

    <el-select
      v-model="pid"
      placeholder="请选择所在省份"
      @change="getCitiesById"
    >
      <el-option
        v-for="p in provinces"
        :key="p.provinceid"
        :label="p.province"
        :value="p.provinceid"
      >
      </el-option>
    </el-select>
    省

    <el-select v-model="cid" placeholder="请选择所在市" @change="getAreasById">
      <el-option
        v-for="c in cities"
        :label="c.city"
        :value="c.cityid"
        :key="c.cityid"
      >
      </el-option>
    </el-select>
    市

    <el-select v-model="aid" placeholder="请选择所在区/县">
      <el-option
        v-for="a in areas"
        :label="a.area"
        :value="a.areaid"
        :key="a.areaid"
      >
      </el-option>
    </el-select>
    区/县
    <h3>---请填写详细地址---</h3>
    <el-input class="detail" v-model="detailAddr" type="textarea"></el-input>

    <h3>---请选择支付方式---</h3>
    <el-radio-group v-model="payType">
      <el-radio label="微信支付"></el-radio>
    </el-radio-group>

    <el-button class="btn" type="success" @click="createOrder()">生成订单</el-button>
  </div>
</template>

<script>
import {
  getProvinces,
  getCities,
  getAreas,
  getProvinceById,
  getCityById,
  getAreaById,
} from "@/api/addr";

import {createOrder} from '@/api/order'

export default {
  data() {
    return {
      pid: null,
      pName: null,
      provinces: [],

      cid: null,
      cName: null,
      cities: [],

      aid: null,
      aName: null,
      areas: [],

      detailAddr: "",
      payType: "微信支付",
    };
  },

  components: {},

  watch: {
    // 简单监听
    pid(newVal, oldVal) {
      //console.log(newVal, oldVal);
      getProvinceById(newVal).then((resp) => {
        this.pName = resp.data.province;
      });
    },

    cid(newVal, oldVal) {
      //console.log(newVal, oldVal);
      getCityById(newVal).then((resp) => {
        this.cName = resp.data.city;
      });
    },

    aid(newVal, oldVal) {
      //console.log(newVal, oldVal);
      getAreaById(newVal).then((resp) => {
        this.aName = resp.data.area;
      });
    },
  },

  created() {
    this.getAllProvinces();
  },

  methods: {
    createOrder(){
        if(!this.pName || !this.cName || !this.aName){
            this.$message("请选择省市区");
            return;
        }
        if(!this.detailAddr){
            this.$message("请填写详细地址");
            return;
        }
        //alert(this.pName+this.cName+this.aName+this.detailAddr)

        let obj = {"receinfo":this.pName+this.cName+this.aName+this.detailAddr}
        createOrder(obj).then(resp=>{
          if(resp.code == 2000){
            this.$message("生成订单成功");
            this.$router.push("/order/list")
          }else{
            if(resp.message){
                this.$message(resp.message)
            }else{
              this.$message("生成订单失败")
            }
            
          }
        })
    },
    getAllProvinces() {
      getProvinces().then((resp) => {
        this.provinces = resp.data;
      });
    },

    getCitiesById() {
      //alert(this.pid  );
      this.cid = null;
      this.aid = null;
      (this.areas = []),
        getCities(this.pid).then((resp) => {
          this.cities = resp.data;
        });
    },

    getAreasById() {
      getAreas(this.cid).then((resp) => {
        this.aid = null;
        this.areas = resp.data;
      });
    },
  },
};
</script>

<style scoped>
.app {
  width: 1226px;
  margin: auto;
}
h3 {
  margin: 15px;
  color: #666;
  font-weight: normal;
}
.detail {
  width: 400px;
}
.btn {
  margin: 0px 15px;
}
</style>